﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Example14.aspx.cs" Inherits="Chapter26.Example14" %>

<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>代码清单 26-14 要 DOM 树里导航</title>
    <meta name="author" content="Adam Freeman" />
    <meta name="description" content="A simple example" />
    <link rel="shortuct icon" href="favicon.ico" type="image/x-icon" />
    <style>
        pre {
            border: medium double black;
        }
    </style>
</head>
<body>
    <pre id="results"></pre>
    <p id="tblock">
        There are lots of different kinds of fruit - there are you over 500 
        varieties of <span>banana</span> alone. By the time we add the 
        countless types of <span>apples</span>, 
        <span id="orange">oranges</span>, and other well-known fruit, we are 
        faced with thousands of choices.
    </p>
    <img id="apple" class="fruits images" src="images/apple.png" alt="apple" />
    <img id="banana" src="images/banana-small.png" alt="small banana" />
    <p>
        One of the most interesting aspects of fruit is the
        variety available in each country. I live near London, in an area which is
        known for its apples.
    </p>
    <p>
        <button id="parent">Parent</button>
        <button id="child">First Child</button>
        <button id="prev">Prev Sibling</button>
        <button id="next">next Sibling</button>
    </p>
    <script>
        var resultsElement = document.getElementById("results");
        var element = document.body;

        var buttons = document.getElementsByTagName("button");
        for (var i = 0; i < buttons.length; i++) {
            buttons[i].onclick = handleButtonClick;
        }

        processNewElement(element);

        function handleButtonClick(e) {
            if (element.style) {
                element.style.backgroundColor = "white";
            }

            if (e.target.id == "parent" && element != document.body) {
                element = element.parentNode;
            } else if (e.target.id == "child" && element.hasChildNodes()) {
                element = element.firstChild;
            } else if (e.target.id == "prev" && element.previousSibling) {
                element = element.previousSibling;
            } else if (e.target.id == "next" && element.nextElementSibling) {
                element = element.nextElementSibling;
            }
            processNewElement(element);
            if (element.style) {
                element.style.backgroundColor = "lightgrey";
            }
        }

        function processNewElement(element) {
            resultsElement.innerHTML = "Element type: " + element + "\n";
            resultsElement.innerHTML += "Element id: " + element.id + "\n";
            resultsElement.innerHTML += "Has child nodes: " + element.hasChildNodes() + "\n";
            if (element.previousSibling) {
                resultsElement.innerHTML += ("Prev sibling is: " + element.previousSibling + "\n");
            } else {
                resultsElement.innerHTML += "No prev sibling\n";
            }
            if (element.nextSibling) {
                resultsElement.innerHTML += "Next sibling is: " + element.nextSibling + "\n";
            } else {
                resultsElement.innerHTML += "No next sibling\n";
            }
        }
    </script>
</body>
</html>
